import React, { Component } from 'react';
import { withRouter } from "react-router-dom"  //高级组件  用于路由跳转
import {GoodList} from "../../api/allgoods"

import "../../styles/allgoods/MyList.css"

class MyList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goodsList: [],
        }
    }


    async componentDidMount(){
        console.log("分类组件传过来的id"+this.props.location.state.id);
        var res = await GoodList({id:this.props.location.state.id})
        console.log(res.data.list);
        this.setState({goodsList:res.data.list})
    }

    goDetails(id){
        console.log("商品详情页的id"+id);
        this.props.history.push({pathname:"/details",state:{id:id}})
    }

    render() {
        return (
            <div>
                <div className='allgoodslist'>
                    {
                        this.state.goodsList.map((item, index) => {
                            return (<div className='goodslist' key={index} onClick={()=>{this.goDetails(item.id)}}>
                                <img src={item.pic} alt="" />
                                <p>{item.name}</p>
                                <p className='Yuanprice'>原价¥100</p>
                                <p className='HuoDongprice'>活动价¥<span>{item.salesPrice.value}</span></p>
                            </div>)
                        })
                    }
                </div>
                <div className='down'></div>
            </div>

        );
    }
}

export default withRouter(MyList);